 /*
 * @description: 商家物料清单备注列表弹窗
 * @Author: along
 * @Date: 2021-03-16
 * @Last Modified by: along
 * @Last Modified time: 2021-03-16
 */
<template>
    <div>
        <el-dialog
            title="备注"
            :visible.sync="dialogVisible"
            width="640px"
            :close-on-click-modal="false"
            class="refuseDialog"
        >
            <div class="_model">
                <div class="_model_nav">
                    <el-button
                        size="medium"
                        type="primary"
                        :style="{width: '136px', float: 'right'}"
                        @click="handleCreateRemark()"
                    >
                        新建备注
                    </el-button>
                </div>
                <template v-if="dataList.length">
                    <div class="_item_wrap">
                        <div
                            v-for="(row,index) in dataList"
                            :key="index"
                            class="_item"
                        >
                            <div class="_nav">
                                <div class="_nav_wrap">
                                    <p class="_nav_date">
                                        创建时间: {{ row.create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                                    </p>
                                    <p class="_nav_name">
                                        创建人: {{ row.admin_true_name }}
                                    </p>
                                </div>
                                <p
                                    class="_nav_change"
                                    @click="handleChangeRemark(row)"
                                >
                                    修改备注
                                </p>
                            </div>
                            <p class="_remark">
                                {{ row.content }}
                            </p>
                        </div>
                    </div>
                </template>
                <template v-else>
                    <p class="_desc">
                        暂无备注信息,可以点击右上角【新建备注信息】按钮创建信息
                    </p>
                </template>
            </div>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    type="primary"
                    size="medium"
                    @click="dialogVisible = false"
                    :style="{width: '120px', fontWeight: 500, marginBottom: '20px'}"
                >
                    关闭
                </el-button>
            </span>
        </el-dialog>

        <!-- 备注弹窗 -->
        <remark-dialog
            ref="remarkDialog"
            @confirm="confirmRemark"
        />
    </div>
</template>

<script>
import remarkDialog from '@/components/bid/remark-dialog.vue';
export default {
    name: 'RemarkListDialog',
    components: { remarkDialog },
    data () {
        return {
            ID: '',
            dialogVisible: false,
            dataList: [],
            remark_id: ''
        };
    },
    watch: {
        dialogVisible (val) {
            if(!val) {
                this.dataList = [];
            }
        }
    },
    mounted () {
    },
    methods: {
        show (material_no) {
            this.dialogVisible = true;
            this.getRemarhList(material_no);
            this.ID = material_no;
        },
        close () {
            this.dialogVisible = false;
        },

        /**
         * @description 获取备注列表
         */
        getRemarhList (material_no) {
            this.$post('/student/hire_room_series_material%5Cget_remark_list', {
                material_no: material_no
            }, resp => {
                if(resp.code == 1) {
                    this.dataList = resp.data.list;
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 新建备注
         */
        handleCreateRemark () {
            this.$refs.remarkDialog.show({
                type: 'add',
                reson: ''
            });
        },

        /**
         * @description 修改备注
         */
        handleChangeRemark (row) {
            this.remark_id = row.id;//记录id
            this.$refs.remarkDialog.show({
                type: 'edit',
                reson: row.content
            });
        },

        /**
         * @description 确定修改
         */
        confirmRemark (reson) {
            this.$post('/student/hire_room_series_material%5Csave_remark', {
                material_no: this.ID,
                content: reson,
                remark_id: this.remark_id
            }, resp => {
                if(resp.code == 1) {
                    this.$notify({
                        title: '提示',
                        message: '修改成功',
                        type: 'success',
                        duration: 2000
                    });
                    setTimeout(() => {
                        this.getRemarhList(this.ID);
                    },200);
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.refuseDialog {
    ._model {
        width: 100%;
        display: flex;
        flex-direction: column;
        ._model_nav {
            width: 100%;
            display: flex;
            justify-content: flex-end;
        }
        ._item_wrap {
            max-height: 400px;
            overflow: hidden;
            overflow-y: auto;
            margin-top: 16px;
            &::-webkit-scrollbar {
                width: 3px;
            }
            ._item {
                width: 576px;
                background: #FBFBFB;
                box-sizing: border-box;
                border: 1px #EEEEEE solid;
                display: flex;
                flex-direction: column;
                margin-bottom: 16px;
                ._nav {
                    width: 100%;
                    height: 44px;
                    display: flex;
                    align-items: center;
                    box-sizing: border-box;
                    padding: 0 24px;
                    justify-content: space-between;
                    border-bottom: 1px rgba(238, 238, 238, 1) solid;
                    ._nav_wrap {
                        display: flex;
                        height: 44px;
                        align-items: center;
                        ._nav_date {
                            color: rgba(51, 51, 51, 1);
                            font-size: 14px;
                            margin-right: 31px;
                        }
                        ._nav_name {
                            color: rgba(51, 51, 51, 1);
                            font-size: 14px;
                        }
                    }
                    ._nav_change {
                        width: 68px;
                        height: 26px;
                        text-align: center;
                        line-height: 26px;
                        color: rgba(32, 160, 255, 1);
                        border: 1px rgba(32, 160, 255, 1) solid;
                        font-size: 12px;
                        font-weight: 500;
                        cursor: pointer;
                        border-radius: 13px;
                    }
                }
                ._remark {
                    color: rgba(51, 51, 51, 1);
                    font-size: 12px;
                    line-height: 20px;
                    width: 528px;
                    margin: 16px 24px;
                }
            }
        }
        ._desc {
            width: 100%;
            height: 240px;
            text-align: center;
            line-height: 240px;
            color: rgba(51, 51, 51, 1);
            font-size: 14px;
            border: 1px #EEEEEE solid;
            background: #FBFBFB;
            margin: 24px 0;

        }
    }
    .dialog-footer {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 52px;
    }
}
</style>

<style lang="less">
.refuseDialog {
    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .el-dialog__body {
        padding: 16px 32px 0px 32px;
    }
    .el-textarea__inner {
        resize: none;
    }
    .el-dialog__footer {
        padding-bottom: 0px;
    }
    .el-button>span {
        font-weight: 500;
    }
}
</style>